<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div class="container1">
      <button style="background-color: red">按钮一</button>
      <button>按钮二</button>
      <button>按钮三</button>
      <div class="box1">11</div>
      <div class="box2">22</div>
      <div class="box3">33</div>
    </div>

    <div class="container2">
      <button style="background-color: red">按钮一</button>
      <button>按钮二</button>
      <button>按钮三</button>
      <div class="box1">11</div>
      <div class="box2">22</div>
      <div class="box3">33</div>
    </div>

    <script>
      class Tab {
        constructor(btns, divs) {
          this.btns = btns;
          this.divs = divs;
        }
        forBtn() {
          // 利用一个 that 保存外部的this
          // var that = this;
          this.btns.forEach((item, key) => {
            item.onclick = () => {
              // console.log("this2:",that);
              this.switchDiv(key); // 调用 switchDiv方法
              this.switchBtn(key); // 调用切换按钮的方法；
            };
          });
        }
        switchDiv(key) {
          // var that = this;
          // forEach里的this 也会改成 window
          this.divs.forEach((div, k) => {
            // console.log(this);
            // 把下标一致的div 显示出来 ，把下标不一致的div 隐藏起来
            // 按钮的下标  key  。 div的下标 是k ，是否相同 ，如果相同就把div显示出来 ，否则 就隐藏
            if (key === k) {
              // 下标和 按钮的下标一致 ，显示div
              this.divs[k].style.display = "block";
            } else {
              this.divs[k].style.display = "none";
            }
          });
        }
        switchBtn(key) {
          this.btns.forEach(function (btn, index) {
            if (index == key) {
              btn.style.background = "red";
            } else {
              btn.style.background = "";
            }
          });
        }
      }

      // function Tab(btns, divs) {
      //     this.btns = btns;
      //     this.divs = divs;
      // }

      // 循环按钮的方法
      // 循环绑定按钮事件方法
      // Tab.prototype.forBtn = function () {
      //     console.log("this1:", this)
      //     // 利用一个 that 保存外部的this
      //     var that = this;
      //     this.btns.forEach(function (item, key) {
      //         item.onclick = function () {
      //             // console.log("this2:",that);
      //             that.switchDiv(key); // 调用 switchDiv方法
      //             that.switchBtn(key); // 调用切换按钮的方法；
      //         }
      //     })
      // }

      // 切换div的方法
      // div的切换方法
      // Tab.prototype.switchDiv = function (key) {
      //     var that = this;
      //     // forEach里的this 也会改成 window
      //     this.divs.forEach(function (div, k) {
      //         console.log(this);
      //         // 把下标一致的div 显示出来 ，把下标不一致的div 隐藏起来
      //         // 按钮的下标  key  。 div的下标 是k ，是否相同 ，如果相同就把div显示出来 ，否则 就隐藏
      //         if (key === k) {
      //             // 下标和 按钮的下标一致 ，显示div
      //             that.divs[k].style.display = "block";
      //         } else {
      //             that.divs[k].style.display = "none";
      //         }
      //     })
      // }

      // // 切换按钮的方法
      // // 按钮的切换方法；
      // Tab.prototype.switchBtn = function (key) {
      //     this.btns.forEach(function (btn, index) {
      //         if (index == key) {
      //             btn.style.background = "red";
      //         } else {
      //             btn.style.background = "";
      //         }
      //     })
      // }

      var btns = document.querySelectorAll(".container1 button");
      var divs = document.querySelectorAll(".container1 div");
      var tab = new Tab(btns, divs);
      console.log(tab);
      tab.forBtn();

      var btns2 = document.querySelectorAll(".container2 button");
      var divs2 = document.querySelectorAll(".container2 div");
      var tab2 = new Tab(btns2, divs2);
      tab2.forBtn();

      // var obj = {
      //     姓名:"张三"
      // }
      // console.log(obj.姓名);
    </script>
  </body>
</html>
